<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";

const activeNav = ref('3') // 默认选中首页
const activeSubNav = ref('3-1')


// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="mainContain">
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>

    <!-- 中间内容 -->
    <div class="zyszjlSection1and2">
      <div class="zyszjlSection1">
        <img src="@/assets/images/zyszjlTitle.png" class="zyszjlTitle" alt="zyszjlTitle">
        <span class="zyszjlPoint zyszjlPoint1"></span>
        <span class="zyszjlContent zyszjlContent1">多维度智能监测</span>
        <span class="zyszjlPoint zyszjlPoint2"></span>
        <span class="zyszjlContent zyszjlContent2">实时预警取证</span>
        <span class="zyszjlPoint zyszjlPoint3"></span>
        <span class="zyszjlContent zyszjlContent3">数据采集全面</span>
      </div>
      <div class="zyszjlSection2">
<!--        1-->
        <div class="imgContain imgContain1">
          
        </div>
        <span class="zyszjlSubTitle zyszjlSubTitle1">智能监控</span>
        <div class="longLine longLine1"></div>
        <div class="shortLine shortLine1"></div>
        <div class="zyszjlSubContent zyszjlSubContent1">
          分平台/分时段/分店铺展示全网100+电商平台品牌热力分布图<br>
<br>
          实现商品ID、店铺ID、链接、页面价、到手价、细分SKU、优惠信息、商品销量、商品主图、发货地、核查时间等多维度智能化监控<br>
          <br>
          定时定点多频分类型监控（黑白名单）、重点店铺重点单品监控、实时动态低价预警、侵权判定预警和取证。
        </div>

<!--        2-->
        <div class="imgContain imgContain2">

        </div>
        <span class="zyszjlSubTitle zyszjlSubTitle2">竞势通观</span>
        <div class="longLine longLine2"></div>
        <div class="shortLine shortLine2"></div>
        <div class="zyszjlSubContent zyszjlSubContent2">
          全网多维采集竞品价格波动、到手价、销量<br>
          <br>
          竞品营销活动监测（如限时折扣、满减策略、异常价格）<br>
          <br>
          自动生成分析报告
        </div>

<!--        3-->
        <div class="imgContain imgContain3">

        </div>
        <span class="zyszjlSubTitle zyszjlSubTitle3">数据采集</span>
        <div class="longLine longLine3"></div>
        <div class="shortLine shortLine3"></div>
        <div class="zyszjlSubContent zyszjlSubContent3">
          分布式爬虫集群，实现7*24高效自动化稳定采集，单日可有效采集10亿级页面数据<br>
          <br>
          支持全网数据采集，支持文字、图片、文档、表格等文件下载。
        </div>

<!--        4-->
        <div class="imgContain imgContain4">

        </div>
        <span class="zyszjlSubTitle zyszjlSubTitle4">自动化处理</span>
        <div class="longLine longLine4"></div>
        <div class="shortLine shortLine4"></div>
        <div class="zyszjlSubContent zyszjlSubContent4">
          智能处理分流：根据违规/侵权类型自动分配对应处理模块方式（电商平台投诉/律师函警告/行政举报等）<br>
          <br>
          一键下架通道：对接电商平台内部API实现72小时内违规链接批量下架
        </div>
      </div>
    </div>

<!--底部内容-->
    <Bottom/>
  </div>
</template>

<style scoped>
.mainContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
  background-color: #101010;
}

/*中间内容*/
.zyszjlSection1and2 {
  width: 100%;
  height: 2800px;
}

.zyszjlSection1 {
  width: 100%;
  height: 720px;
  background-image: url('@/assets/bk/zyszjlSection1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.zyszjlTitle {
  color: #FFFFFF;
  position: absolute;
  top: 308px;
  left: 400px;
}

.zyszjlPoint {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FF6600;
  /* border: #FF6600 solid 1px; */
}

.zyszjlPoint1 {
  position: absolute;
  top: 404px;
  left: 400px;
}

.zyszjlPoint2 {
  position: absolute;
  top: 404px;
  left: 594px;
}

.zyszjlPoint3 {
  position: absolute;
  top: 404px;
  left: 769px;
}


.zyszjlContent {
  font-size: 20px;
  line-height: 28px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
}

.zyszjlContent1 {
  position: absolute;
  top: 396px;
  left: 424px;
}

.zyszjlContent2 {
  position: absolute;
  top: 396px;
  left: 618px;
}

.zyszjlContent3 {
  position: absolute;
  top: 396px;
  left: 793px;
}
.zyszjlSection2{
  position: relative;
}
.imgContain {
  width: 681px;
  height: 436px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.imgContain1 {
  background-image: url('@/assets/images/zyszjlImgContain1.png');
  position: absolute;
  top: 40px;
  left: 360px;
}

.imgContain2 {
  background-image: url('@/assets/images/zyszjlImgContain2.png');
  position: absolute;
  top: 540px;
  left: 920px;
}

.imgContain3 {
  background-image: url('@/assets/images/zyszjlImgContain3.png');
  position: absolute;
  top: 1040px;
  left: 360px;
}

.imgContain4 {
  background-image: url('@/assets/images/zyszjlImgContain4.png');
  position: absolute;
  top: 1540px;
  left: 920px;
}
.zyszjlSubTitle {
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 40px;
  color: #FF6600;
  line-height: 56px;
  text-align: left;
  font-style: normal;
  position: absolute;
}

.zyszjlSubTitle1 {
  top: 54px;
  left: 1070px;
}

.zyszjlSubTitle2 {
  top: 614px;
  left: 360px;
}

.zyszjlSubTitle3 {
  top: 1139px;
  left: 1070px;
}

.zyszjlSubTitle4 {
  top: 1614px;
  left: 360px;
}
.longLine {
  width: 516px;
  height: 4px;
  background: #FF6600;
  border-radius: 4px;
  opacity: 0.12;
  position: absolute;
}

.longLine1 {
  top: 118px;
  left: 1070px;
}

.longLine2 {
  top: 678px;
  left: 360px;
}

.longLine3 {
  top: 1203px;
  left: 1070px;
}

.longLine4 {
  top: 1678px;
  left: 360px;
}
.shortLine {
  width: 79px;
  height: 4px;
  background: linear-gradient(90deg, #FF9F00 0%, #FF6600 100%);
  border-radius: 4px;
  position: absolute;
}

.shortLine1 {
  top: 118px;
  left: 1070px;
}

.shortLine2 {
  top: 678px;
  left: 360px;
}

.shortLine3 {
  top: 1203px;
  left: 1070px;
}

.shortLine4 {
  top: 1678px;
  left: 360px;
}
.zyszjlSubContent {
  width: 516px;
  height: 300px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 30px;
  text-align: justify;
  font-style: normal;
  position: absolute;
}

.zyszjlSubContent1 {
  top: 146px;
  left: 1070px;
}

.zyszjlSubContent2 {
  top: 706px;
  left: 360px;
}

.zyszjlSubContent3 {
  top: 1231px;
  left: 1070px;
}

.zyszjlSubContent4 {
  top: 1706px;
  left: 360px;
}

</style>